import { Grid } from 'antd-mobile';
import React from 'react';
import { useNavigate } from 'react-router-dom';

import styles from '../index.module.css';

import Nav1 from '../../../assets/images/nav-1.png';
import Nav2 from '../../../assets/images/nav-2.png';
import Nav3 from '../../../assets/images/nav-3.png';
import Nav4 from '../../../assets/images/nav-4.png';
const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/search',
  },
  {
    id: 2,
    img: Nav2,
    title: '合租',
    path: '/home/search',
  },
  {
    id: 3,
    img: Nav3,
    title: '地图找房',
    path: '/home/houselist',
  },
  {
    id: 4,
    img: Nav4,
    title: '去出租',
    path: '/rent/add',
  },
];

export const Nav = () => {
  const history = useNavigate();

  return (
    <Grid columns={4} className={styles.nav}>
      {navs.map((item) => (
        <Grid.Item
          key={item.id}
          onClick={() => history(item.path)}
          style={{ height: '95px' }}
        >
          <div className={styles.navGrid}>
            <img src={item.img} alt={item.title} className={styles.navImg} />
            <h2>{item.title}</h2>
          </div>
        </Grid.Item>
      ))}
    </Grid>
  );
};
